
<template>
  <div class="data_permission">
    <header-title :name="name"
                  :dutyName="dutyName">
      <div slot="system"
           class="system-selete">
        <span>操作系统：</span>
        <Select v-model="value"
                @on-change="selectOption"
                style="width:200px;margin-left:8px;">
          <Option v-for="item in option"
                  :value="item.id"
                  :key="item.id">{{ item.resName }}</Option>
        </Select>
      </div>
    </header-title>
    <div class="content">
      <ul>
        <li class="content-menu">
          <div class="system-ad">
            <span>模块</span>
          </div>
          <div class="system-ds">
            <div class="system-ds-content">
              <div class="system-ds-second"><span>菜单</span></div>
              <div class="system-ds-third"><span>数据</span></div>
            </div>
          </div>
        </li>
        <li v-for="(item,index) in dataArr"
            :key="index">
          <div class="system-ad">
            <span>
              <Checkbox v-model="item.selected"
                        @click.prevent.native="handleGroup(item)">{{item.resName}}</Checkbox>
            </span>
          </div>
          <div class="system-ds"
               :class="{'thirdItem-name':!item.childList.length}">
            <div class="system-ds-content"
                 v-for="(secondItem,index) in item.childList"
                 :key="index">
              <div class="system-ds-second">
                <span>
                  <Checkbox v-model="secondItem.selected"
                            @click.prevent.native="handleGroupChange(item, secondItem)">{{secondItem.resName}}</Checkbox>
                </span>
              </div>
              <div class="system-ds-third"
                   :class="{'thirdItems-name':!secondItem.childList.length}">
                <div v-for="(thirdItem,index) in secondItem.childList"
                     :key="index"
                     class="system-ds-name">
                  <!-- <CheckboxGroup @on-change="checkAllGroupChange"
                                 v-model="secondItem.setArr"> -->
                  <Checkbox v-model="thirdItem.selected"
                            @click.prevent.native="handleCheckAll(item, secondItem, thirdItem)">{{thirdItem.resName}}</Checkbox>
                  <!-- </CheckboxGroup> -->
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <Spin size="large"
            fix
            v-if="spinShow"></Spin>
    </div>
    <div class="system_submit"
         style="width:200px;margin:20px auto;">
      <Button type="primary"
              style="width:80px;margin-right:30px"
              class="system-submit-btn"
              @click="submit">保存</Button>
      <Button class="system-submit-btn"
              style="width:80px"
              @click="resit">取消</Button>
    </div>
  </div>
</template>
<script>
import { routeEqual } from '@/libs/util'
import HeaderTitle from '@/view/components/header-title/header-title.vue'
import { permissionTreeList, demandRole, demandResourceList, setfunctionGrant } from '@/api/system/role'
export default {
  name: 'role_setting',
  components: { HeaderTitle },
  data () {
    return {
      spinShow: true,
      isSubmit: true,
      name: '角色名称',
      arrfilter: [],
      dutyName: '',
      value: '',
      status: false,
      checkAll: false,
      seletedArr: [],
      option: [],
      seletArr: [],
      indeterminate: false,
      indeterItemminate: true,
      selectedArr: [],
      checkItemAll: false,
      checkAllGroup: [],
      title: ['模块', '菜单', '数据'],
      dataArr: [
      ]
    }
  },
  computed: {},
  mounted () {
    // this.findTree()
    if (this.$route.params.id) {
      this.findOnlyTree(this.$route.params.id)
      this.getResoResourceList(this.$route.params.id)
    }
  },
  methods: {
    // 选择框
    selectOption (val) {
      this.spinShow = true
      // 选择
      this.option.forEach((ele, idx) => {
        if (ele.id === val && !ele.hasOwnProperty('selted')) {
          permissionTreeList({ merchantId: this.$store.state.user.merchantId, id: this.$route.params.id, appId: val }).then(res => {
            if (res.data.status === 200) {
              this.spinShow = false
              this.dataArr = res.data.data[0].childList
              this.$set(ele, 'selted', res.data.data[0].childList)
              this.depCirculation(this.dataArr)
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
        if (ele.id === val && ele.hasOwnProperty('selted')) {
          this.spinShow = false
          this.dataArr = ele.selted
          this.depCirculation(this.dataArr)
        }
      })
    },
    filter (item) {

    },
    handleGroup (item) {
      item.selected = !item.selected
      if (item.selected) {
        item.childList.forEach(ele => {
          ele.selected = true
          ele.childList.forEach(eld => {
            eld.selected = true
          })
        })
      } else {
        item.childList.forEach(ele => {
          ele.selected = false
          ele.childList.forEach(eld => {
            eld.selected = false
          })
        })
      }
    },
    handleGroupChange (item, secondItem) {
      secondItem.selected = !secondItem.selected
      if (secondItem.selected) {
        secondItem.childList.forEach(ele => {
          ele.selected = true
        })
        item.selected = true
      } else {
        secondItem.childList.forEach(ele => {
          ele.selected = false
        })
      }
    },
    // 设置
    depCirculation (arr) {
      if (Array.isArray(arr)) {
        arr.forEach((ele, index, Arr) => {
          ele.selected = !!ele.selected
          this.$set(ele, 'setArr', [])
          if (ele.hasOwnProperty('childList')) {
            this.depCirculation(ele.childList)
          }
        })
      }
    },
    handleCheckAll (item, secondItem, thirdItem) {
      thirdItem.selected = !thirdItem.selected
      if (thirdItem.selected) {
        secondItem.selected = true
        item.selected = true
        if (thirdItem.perms.substring(thirdItem.perms.length - 5) !== ':view' || thirdItem.perms.substring(thirdItem.perms.length - 7) === ':detail') {
          secondItem.childList.forEach(ele => {
            if (ele.perms.substring(ele.perms.length - 5) === ':view' || ele.perms.substring(ele.perms.length - 7) === ':detail') {
              ele.selected = true
            }
          })
        }
      }
      if (!thirdItem.selected) {
        if (thirdItem.perms.substring(thirdItem.perms.length - 7) === ':detail') {
          secondItem.childList.forEach(ele => {
            if (ele.perms.substring(ele.perms.length - 5) !== ':view') {
              ele.selected = false
            }
          })
        }
        if (thirdItem.perms.substring(thirdItem.perms.length - 5) === ':view') {
          secondItem.childList.forEach(ele => {
            ele.selected = false
          })
        }
      }
    },
    // 勾选上级
    getResoResourceList (roleId) {
      demandResourceList({
        merchantId: this.$store.state.user.merchantId,
        resType: 0
      }).then(res => {
        if (res.data.status === 200) {
          this.option = res.data.data
          this.spinShow = false
          if (res.data.data.length) {
            this.value = this.option[0].id
            permissionTreeList({ merchantId: this.$store.state.user.merchantId, id: roleId, appId: this.value }).then(res => {
              if (res.data.status === 200) {
                this.dataArr = res.data.data[0].childList
                this.$set(this.option[0], 'selted', res.data.data[0].childList)
                this.depCirculation(this.dataArr)
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    // 筛选出已选列表
    filterSeletced (data) {
      data.forEach(ele => {
        if (ele.selected) {
          if (this.selectedArr.indexOf(ele.id) === -1) {
            this.selectedArr.push(ele.id)
            this.filterSeletced(ele.childList)
          }
        }
      })
    },
    // 提交
    submit () {
      this.isSubmit = true
      this.selectedArr = []
      this.filterSeletced(this.dataArr)
      this.dataArr.forEach(ele => {
        ele.childList.forEach((elt, idx, arr) => {
          elt.childList.forEach((eld, itx, art) => {
            if (eld.selected) {
              if (!elt.selected && ele.selected) {
                this.isSubmit = false
                this.$Message.error(`请选择菜单${elt.resName}`)
              }
              if (!ele.selected && !elt.selected) {
                this.isSubmit = false
                this.$Message.error(`请选择菜单${elt.resName}`)
              }
              if (!ele.selected && elt.selected) {
                this.isSubmit = false
                this.$Message.error(`请选择模块${ele.resName}`)
              }
            }
          })
        })
      })
      if (this.isSubmit) {
        setfunctionGrant({
          merchantId: this.$store.state.user.merchantId,
          roleId: this.$route.params.id,
          appId: this.value,
          resIdList: this.selectedArr
        }).then(res => {
          if (res.data.status === 200) {
            this.$store.commit('closeTag', this.$route)
            this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
            this.$nextTick(() => {
              this.$router.push({
                name: 'role_list'
              })
            })
            this.$Message.success('权限设置成功')
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      }
    },
    //
    resit () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'role_list'
        })
      })
    },
    // 查询单独
    findOnlyTree (roleId) {
      demandRole({
        'merchantId': this.$store.state.user.merchantId,
        id: roleId
      }).then(res => {
        if (res.data.status === 200) {
          this.dutyName = res.data.data.roleName
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }

}
</script>
<style lang="less">
.data_permission {
  .header-title {
    padding: 24px 32px;
    height: 80px;
    border: none;
    background: #ffffff;
    .title {
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #17233d;
      font-weight: bold;
    }
  }
  .system-selete {
    display: flex;
    align-items: center;
  }
  .content {
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #e8eaec;
    position: relative;
    > ul {
      > li {
        list-style: none;
        // border-top: 1px solid #e8eaec;
        display: -webkit-flex;
        .system-ad {
          width: 20%;
          border-right: 1px solid #e8eaec;
          border-bottom: 1px solid #e8eaec;
          display: flex;
          justify-content: center;
          flex-direction: column;
          > span {
            display: inline-block;
            width: 100%;
            padding-left: 20px;
          }
        }
      }
      .content-menu {
        height: 40px;
        line-height: 40px;
        background: #f8f8f9;
      }
      .thirdItem-name {
        border-bottom: 1px solid #e8eaec;
        min-height: 114px;
      }
      .thirdItems-name {
        min-height: 114px;
      }
      .system-ds {
        width: 80%;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        flex-wrap: wrap;
        .system-ds-content {
          width: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          display: -webkit-flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          border-bottom: 1px solid #e8eaec;
          .system-ds-second {
            width: 30%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            border-right: 1px solid #e8eaec;
            > span {
              display: inline-block;
              width: 100%;
              padding-left: 20px;
            }
          }
          .system-ds-third {
            width: 70%;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding-left: 20px;
          }
          .system-ds-name {
            width: 180px;
            padding: 18px 0;
            padding-right: 21px;
          }
        }
      }
    }

    .checkall {
      height: 50px;
      line-height: 50px;
      background: #f3f3f3;
      border: 1px solid #e8eaec;
      text-align: center;
    }
    .system_submit {
      padding: 32px;
      .system-submit-btn {
        width: 100px;
        height: 32px;
        margin-right: 24px;
      }
    }
  }
}
</style>
